<template>
  <el-card style="max-width: 100%" shadow="hover">
    <span>
      <h2 class="card-title">用户审核</h2>
    </span>
 
  </el-card>
  <!--选择栏部分-->
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
          <el-row>
            <el-col><div class="select_left">
          <el-input v-model="query.user_id" style="width: 150px" placeholder="用户ID" />&nbsp;&nbsp;
          <el-input v-model="query.user_name" style="width: 150px" placeholder="用户昵称" /> &nbsp;&nbsp;&nbsp;&nbsp;
          <el-button default type="primary" :icon="Search" @click="onSubmit">查询</el-button>
            </div> </el-col>
            <el-col>
        <div class="select_right">
          <el-button default type="success" size="small" @click="multAgree">
            通过
          </el-button>
          <el-button default  type="danger" size="small" @click="OpenPassDialog1">
            拒绝
          </el-button>
        </div></el-col></el-row>
      </div>
    </template>

    <!--内容呈现部分-->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="user_id" label="用户ID" width="150" />
      <el-table-column prop="user_image" label="头像" width="180">
        <template #default="{ row }">
          <img v-if="row.user_image"
               :src="`http://localhost:8080/image/upload/${row.user_image}`"
               alt="user_image"
               style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="昵称" width="120" />
      <el-table-column prop="selfintro" label="自我介绍" width="400" />
      <el-table-column prop="last_modified_time" label="修改时间" width="120" />
      <el-table-column prop="check_info" label="备注" width="200" />
      <el-table-column fixed="right" label="操作" width="170">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button default type="success" size="small" @click="singleAgree(scope.row.user_id)">
            通过
          </el-button>
          <el-button default  type="danger" size="small" @click="OpenPassDialog(scope.row.user_id)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>



  <!--对话框：拒绝-->
  <el-dialog
      v-model="PassDialogVisible"
      title="填写拒绝理由"
      width="600"
      align-center
  >
    <el-form-item label="提交的修改存在：" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.check_info">
        <el-checkbox value="昵称具有敏感词" name="type">
          昵称具有敏感词
        </el-checkbox>
        <el-checkbox value="头像不符合要求" name="type">
          头像不符合要求
        </el-checkbox>
        <el-checkbox value="自我介绍具有敏感词" name="type">
          自我介绍具有敏感词
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="PassDialogVisible = false">取消</el-button>
        <el-button default type="primary" @click="Reason()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!--多次拒绝的对话框-->
  <el-dialog
      v-model="PassDialogVisible1"
      title="填写拒绝理由"
      width="600"
      align-center
  >
    <el-form-item label="提交的修改存在：" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.check_info">
        <el-checkbox value="昵称具有敏感词" name="type">
          昵称具有敏感词
        </el-checkbox>
        <el-checkbox value="头像不符合要求" name="type">
          头像不符合要求
        </el-checkbox>
        <el-checkbox value="自我介绍具有敏感词" name="type">
          自我介绍具有敏感词
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="PassDialogVisible = false">取消</el-button>
        <el-button default type="primary" @click="multuReason()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>



<script>
import { Search} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default{
  components:{
    Search
  },
  computed:{
    Search(){
      return Search
    }
  },
  data(){
    return{
      userIdList:[],
      userInfoList:[],
      num :0 ,
      form:{             //拒绝对象
        check_info:[],
        user_id: null,
      },    //用于存储点击按钮后获取行数据
      formLabelWidth: '180px',  //对话框宽度
      large:true,
      background: true,
      PassDialogVisible:false,     //拒绝对话框默认为关闭
      PassDialogVisible1:false,      //多选拒绝对话框
      multipleTableRef:[],    //多选框
      query:{                 //查询条件的对象
        user_name:"",
        user_id:null,
      },
      tableData:[],              //用户个人信息数据
    }
  },
  methods:{
    OpenPassDialog(user_id){
      this.PassDialogVisible = true;
      this.form.user_id = user_id;
    },
    OpenPassDialog1(){
      this.PassDialogVisible1 = true;
    },
    //拒绝时填写备注
    multuReason() {
      this.form.check_info=this.form.check_info.join(',');
      this.userInfoList= this.multipleTableRef.map(item => item.check_info = this.form.check_info)
      this.userIdList= this.multipleTableRef.map(item => item.user_id);
        console.log(this.userInfoList);
        console.log(this.userIdList);
        this.$http.post("http://localhost:8080/user/updateMultCheck_info",{
          checks_info: this.userInfoList,
          users_id:this.userIdList
        }).then((res) => {
          if (res.data !== 0) {
            ElMessage({
              message: "拒绝发送成功！",
              type: "success",
            })
          } else {
            ElMessage({
              message: "拒绝发送失败！",
              type: "success"
            })
          }
          this.LoadUpdateUserData();
          this.PassDialogVisible1 = false;
          this.form = {};

        })
            .catch(function (err) {
              console.log(err);
            })
    },
    Reason(){
      this.form.check_info=this.form.check_info.join(',');
      console.log(this.form.check_info);
      console.log(this.form.user_id);
      this.$http.post("http://localhost:8080/user/updateCheck_info?check_info="+this.form.check_info+"&user_id="+this.form.user_id).then((res)=>{
        if(res.data !==0){
          this.PassDialogVisible1 = false;
          this.LoadUpdateUserData();
          this.form = {};
          ElMessage({
            message:"拒绝发送成功！",
            type:"success",
          })
        }else{
          ElMessage({
            message:"拒绝发送失败！",
            type:"success"
          })
        }
      }).catch(function (err) {
        console.log(err);
      });
    },
    //修改数据的审核状态
    //一次多同意多个数据
    multAgree(){
      var num = 0;
      ElMessageBox.confirm(
          '确定通过多条数据?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ) .then(() => {
        this.userIdList= this.multipleTableRef.map(item => item.user_id),
          this.$http.post("http://localhost:8080/user/updateMutlStatus", {
            users_id: this.userIdList
          }).then((res) => {
            console.log(res.data);
             num = res.data ;
            if (num !== 0) {
              ElMessage({
                message: "审批成功"+num+"条记录",
                type: "success"
              })
              this.LoadUpdateUserData();
            }
            else {
              ElMessage({
                message: "审批失败！",
                type: "success"
              })
            }
          })
        })
      .catch(function (err) {
        console.log(err);
      })
    },

    singleAgree(user_id){
      this.scope = this.tableData.filter(row => row.user_id === user_id);
      console.log(user_id);
      ElMessageBox.confirm(
          '确定通过?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            this.$http.post("http://localhost:8080/user/updateStatus/" + user_id).then((res) => {
              if (res.data == 1) {
                ElMessage({
                  message: "审批成功！",
                  type: "success"
                })
                this.LoadUpdateUserData();

              } else {
                ElMessage({
                  message: "审批失败！",
                  type: "success"
                })
              }
            }).catch(function (err) {
              console.log(err);
            })
          })
    },

    handleSelectionChange(val){       //多行选择
      this.multipleTableRef = val   //multipleTableRef是一个对象数组
      console.log(this.multipleTableRef);
    },

    onSubmit(){                     //查询提交
      console.log(this.query);
      this.LoadUpdateUserData();
    },

    //跨域连接查询用户信息修改的数据对接
    LoadUpdateUserData(){
      this.$http.get("http://localhost:8080/user/checkuser",{params:{
          user_id:this.query.user_id,
          user_name:this.query.user_name,
        }}).then((res)=>{
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  //被挂载,调用自定义函数
  mounted() {
    this.LoadUpdateUserData()

  }
}
</script>


<style>
.select_left{
  display: flex;
  justify-content: left;
}
.select_right{
  display: flex;
  justify-content: right;
}
</style>
